// TailwindCSS4 Variables
// 基于 https://www.tailwindcss.cn/ 的样式变量定义

// Spacing Scale (间距比例)
$spacing: (
  0: 0,
  px: 1px,
  0\.5: 0.125rem,
  1: 0.25rem,
  1\.5: 0.375rem,
  2: 0.5rem,
  2\.5: 0.625rem,
  3: 0.75rem,
  3\.5: 0.875rem,
  4: 1rem,
  5: 1.25rem,
  6: 1.5rem,
  7: 1.75rem,
  8: 2rem,
  9: 2.25rem,
  10: 2.5rem,
  11: 2.75rem,
  12: 3rem,
  14: 3.5rem,
  16: 4rem,
  20: 5rem,
  24: 6rem,
  28: 7rem,
  32: 8rem,
  36: 9rem,
  40: 10rem,
  44: 11rem,
  48: 12rem,
  52: 13rem,
  56: 14rem,
  60: 15rem,
  64: 16rem,
  72: 18rem,
  80: 20rem,
  96: 24rem
);

// Font Sizes (字体大小)
$font-sizes: (
  xs: 0.75rem,
  sm: 0.875rem,
  base: 1rem,
  lg: 1.125rem,
  xl: 1.25rem,
  2xl: 1.5rem,
  3xl: 1.875rem,
  4xl: 2.25rem,
  5xl: 3rem,
  6xl: 3.75rem,
  7xl: 4.5rem,
  8xl: 6rem,
  9xl: 8rem
);

// Font Weights (字体粗细)
$font-weights: (
  thin: 100,
  extralight: 200,
  light: 300,
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  extrabold: 800,
  black: 900
);

// Line Heights (行高)
$line-heights: (
  3: 0.75rem,
  4: 1rem,
  5: 1.25rem,
  6: 1.5rem,
  7: 1.75rem,
  8: 2rem,
  9: 2.25rem,
  10: 2.5rem,
  none: 1,
  tight: 1.25,
  snug: 1.375,
  normal: 1.5,
  relaxed: 1.625,
  loose: 2
);

// Border Radius (圆角)
$border-radius: (
  none: 0,
  sm: 0.125rem,
  default: 0.25rem,
  md: 0.375rem,
  lg: 0.5rem,
  xl: 0.75rem,
  2xl: 1rem,
  3xl: 1.5rem,
  full: 9999px
);

// Box Shadow (阴影)
$box-shadows: (
  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
  default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
  2xl: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
  none: '0 0 #0000'
);

// Colors (颜色)
$colors: (
  transparent: transparent,
  current: currentColor,
  black: #000000,
  white: #ffffff,
  slate: (
    50: #f8fafc,
    100: #f1f5f9,
    200: #e2e8f0,
    300: #cbd5e1,
    400: #94a3b8,
    500: #64748b,
    600: #475569,
    700: #334155,
    800: #1e293b,
    900: #0f172a,
    950: #020617
  ),
  gray: (
    50: #f9fafb,
    100: #f3f4f6,
    200: #e5e7eb,
    300: #d1d5db,
    400: #9ca3af,
    500: #6b7280,
    600: #4b5563,
    700: #374151,
    800: #1f2937,
    900: #111827,
    950: #030712
  ),
  red: (
    50: #fef2f2,
    100: #fee2e2,
    200: #fecaca,
    300: #fca5a5,
    400: #f87171,
    500: #ef4444,
    600: #dc2626,
    700: #b91c1c,
    800: #991b1b,
    900: #7f1d1d,
    950: #450a0a
  ),
  orange: (
    50: #fff7ed,
    100: #ffedd5,
    200: #fed7aa,
    300: #fdba74,
    400: #fb923c,
    500: #f97316,
    600: #ea580c,
    700: #c2410c,
    800: #9a3412,
    900: #7c2d12,
    950: #431407
  ),
  amber: (
    50: #fffbeb,
    100: #fef3c7,
    200: #fde68a,
    300: #fcd34d,
    400: #fbbf24,
    500: #f59e0b,
    600: #d97706,
    700: #b45309,
    800: #92400e,
    900: #78350f,
    950: #451a03
  ),
  green: (
    50: #f0fdf4,
    100: #dcfce7,
    200: #bbf7d0,
    300: #86efac,
    400: #4ade80,
    500: #22c55e,
    600: #16a34a,
    700: #15803d,
    800: #166534,
    900: #14532d,
    950: #052e16
  ),
  blue: (
    50: #eff6ff,
    100: #dbeafe,
    200: #bfdbfe,
    300: #93c5fd,
    400: #60a5fa,
    500: #3b82f6,
    600: #2563eb,
    700: #1d4ed8,
    800: #1e40af,
    900: #1e3a8a,
    950: #172554
  ),
  primary: (
    50: #eff6ff,
    100: #dbeafe,
    200: #bfdbfe,
    300: #93c5fd,
    400: #60a5fa,
    500: #3b82f6,
    600: #2563eb,
    700: #1d4ed8,
    800: #1e40af,
    900: #1e3a8a,
    950: #172554
  )
);

// Breakpoints (断点)
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px
);

// Z-Index (层级)
$z-index: (
  0: 0,
  10: 10,
  20: 20,
  30: 30,
  40: 40,
  50: 50,
  auto: auto
);

// Opacity (透明度)
$opacity: (
  0: 0,
  5: 0.05,
  10: 0.1,
  20: 0.2,
  25: 0.25,
  30: 0.3,
  40: 0.4,
  50: 0.5,
  60: 0.6,
  70: 0.7,
  75: 0.75,
  80: 0.8,
  90: 0.9,
  95: 0.95,
  100: 1
);

// Transition Duration (过渡时间)
$transition-duration: (
  75: 75ms,
  100: 100ms,
  150: 150ms,
  200: 200ms,
  300: 300ms,
  500: 500ms,
  700: 700ms,
  1000: 1000ms
);

// Transition Timing Function (过渡函数)
$transition-timing: (
  linear: linear,
  in: cubic-bezier(0.4, 0, 1, 1),
  out: cubic-bezier(0, 0, 0.2, 1),
  in-out: cubic-bezier(0.4, 0, 0.2, 1)
);

// Helper Functions
@function spacing($key) {
  @return map-get($spacing, $key);
}

@function font-size($key) {
  @return map-get($font-sizes, $key);
}

@function font-weight($key) {
  @return map-get($font-weights, $key);
}

@function line-height($key) {
  @return map-get($line-heights, $key);
}

@function border-radius($key) {
  @return map-get($border-radius, $key);
}

@function box-shadow($key) {
  @return unquote(map-get($box-shadows, $key));
}

@function color($color, $shade: 500) {
  $color-map: map-get($colors, $color);
  @if type-of($color-map) == map {
    @return map-get($color-map, $shade);
  } @else {
    @return $color-map;
  }
}

@function opacity($key) {
  @return map-get($opacity, $key);
}

@function z-index($key) {
  @return map-get($z-index, $key);
}

@function transition-duration($key) {
  @return map-get($transition-duration, $key);
}

@function transition-timing($key) {
  @return map-get($transition-timing, $key);
}

// Responsive Mixins
@mixin sm {
  @media (min-width: map-get($breakpoints, sm)) {
    @content;
  }
}

@mixin md {
  @media (min-width: map-get($breakpoints, md)) {
    @content;
  }
}

@mixin lg {
  @media (min-width: map-get($breakpoints, lg)) {
    @content;
  }
}

@mixin xl {
  @media (min-width: map-get($breakpoints, xl)) {
    @content;
  }
}

@mixin xxl {
  @media (min-width: map-get($breakpoints, 2xl)) {
    @content;
  }
}